/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useEffect, useState, useRef } from 'react';
import { Space, Tag, Input } from 'antd';
import type { InputRef } from 'antd';
import { defaultTagsMap } from '../../utils';
import { PlusOutlined } from '@ant-design/icons';
import { CloseCircleFilled } from '@ant-design/icons';

interface FormTagProps {
  value?: string[];
  status: boolean;
  description?: string[];
  onChange: Function;
  onTags: Function;
  onAddTags: Function;
  onDeleteTags: Function;
}

const { CheckableTag } = Tag;
const Index = (props: FormTagProps) => {
  const { value = [], status, description = [], onChange, onTags, onAddTags, onDeleteTags } = props;
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const inputRef = useRef<InputRef>(null);
  const [defoptions, setOptions] = useState<string[]>([]);

  const showInput = () => {
    setInputVisible(true);
  };
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };
  const handleAdd = (addTag: string) => {
    onAddTags(addTag);
    onTags([...defoptions, addTag]);
  };
  const handleInputConfirm = () => {
    if (inputValue && defoptions.indexOf(inputValue) === -1) {
      handleAdd(inputValue);
    }
    setInputVisible(false);
    setInputValue('');
  };
  const handleClose = (removedTag: string) => {
    const list: string[] = defoptions.filter((item) => removedTag !== item);
    onDeleteTags(removedTag);
    onTags(list);
  };
  const handleChange = (tag: string, checked: boolean) => {
    const list = checked ? [...value, tag] : value.filter((item) => item !== tag);
    onChange(list);
  };

  useEffect(() => {
    onChange(value);
  }, [value.length]);
  useEffect(() => {
    setOptions(description);
  }, [description.length]);
  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);
  return (
    <Space wrap>
      {defoptions.map((item: string, index: number) =>
        status ? (
          <Tag
            color={![...defaultTagsMap, ...value].includes(item) ? '' : '#108ee9'}
            key={item}
            closable={![...defaultTagsMap, ...value].includes(item)}
            closeIcon={<CloseCircleFilled style={{ color: '#ff4d4f' }} />}
            onClose={handleClose.bind(null, item)}
          >
            {item}
          </Tag>
        ) : (
          <CheckableTag
            prefixCls={value.includes(item) ? '' : 'ant-tag css-10ed4xt'}
            style={{ cursor: 'pointer' }}
            key={`${item}` + index}
            checked={value.includes(item)}
            onChange={handleChange.bind(null, item)}
          >
            {item}
          </CheckableTag>
        ),
      )}

      {status ? (
        inputVisible ? (
          <Input
            ref={inputRef}
            type='text'
            size='small'
            style={{ width: 100 }}
            maxLength={5}
            value={inputValue}
            onChange={handleInputChange}
            onBlur={handleInputConfirm}
            onPressEnter={handleInputConfirm}
          />
        ) : (
          <Tag onClick={showInput}>
            <PlusOutlined /> 添加新标签
          </Tag>
        )
      ) : null}
    </Space>
  );
};

export default Index;
